import { useState, useEffect,useContext } from "react";
import {AppContext} from "../components/AppContext"
export default function App() {
  const URLS = ["www.baidu.com", "www.taobao.com"];
  const [url, setUrl] = useState("www.taobao.com");
  const [curt,setCurt]=useState(0)
  useEffect(() => {
    console.log('进入页面了');
    return () => {
      console.log('离开页面了');
    }
  },[])
  return (
    <>
      <label>
        <select value={url} onChange={(e)=>setUrl(e.target.value)}>
          {URLS.map((item) => (
            <option key={item} value={item}>
              {item}
            </option>
          ))}
        </select>
      </label>
      <input type="number" value={curt} onChange={(e:any)=>setCurt(e.target.value)}></input>
      <h1>中华人民共和国</h1>
      <h2>购物车{curt}</h2>
      <AppContext.Provider value={curt}>
      <Page url={url}></Page>
      </AppContext.Provider>
    </>
  );
}

function Page({ url }: { url: string }) {
  const curt=useContext(AppContext)
  useEffect(() => {
    console.log(url,curt);
  }, [url])
  return <h2>{ url }</h2>
}
